<template>
  <div class="screeningVerification">
    <el-select
      @change="parent_update"
      class="left"
      filterable
      size="small"
      v-model="item.key"
      placeholder="关键字"
    >
      <el-option-group v-for="group in key_list" :key="group.label" :label="group.label">
        <el-option
          v-for="item in group.options"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-option-group>
    </el-select>
    <el-select
      @change="parent_update"
      class="mid"
      v-model="item.operation"
      placeholder="逻辑"
      size="small"
    >
      <el-option
        v-for="item in operation"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-select
      @change="parent_update"
      v-if="item.operation==2 || item.operation==1"
      v-model="item.value"
      class="right"
      size="small"
      multiple
      filterable
      allow-create
      clearable
      default-first-option
      placeholder="目标值"
    >
      <el-option
        v-for="item in value_list"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      ></el-option>
    </el-select>
    <el-input-number
      @change="parent_update"
      :min="1"
      class="left"
      v-if="item.operation==3||item.operation==4"
      size="small"
      v-model="item.value"
    ></el-input-number>
    <!-- 区间 -->
    <el-input-number
      :min="1"
      @change="parent_update"
      class="left"
      v-if="item.operation==5"
      size="small"
      v-model="item.value"
    ></el-input-number>
    <span v-if="item.operation==5" class="txt">至</span>
    <el-input-number
      :min="item.value+1"
      @change="parent_update"
      class="left"
      v-if="item.operation==5"
      size="small"
      v-model="item.value_arr"
    ></el-input-number>
  </div>
</template>

<script>
export default {
  name: "screeningVerification",
  props: {
    item: {
      type: Object,
      default: () => {
        return {
          id: Math.random()
            .toString(36)
            .substr(2),
          key: null,
          operation: null,
          value: null,
          value_arr: []
        };
      }
    }
  },
  components: {},
  data() {
    return {
      key_list: [
        {
          label: "事件属性",
          options: [
             {
              value: "1003",
              label: "元素名称"
            },
            {
              value: "1006",
              label: "平台"
            },
            {
              value: "1001",
              label: "启动时长"
            },
            {
              value: "1005",
              label: "SDK类型"
            }
          ]
        },
        {
          label: "用户属性",
          options: [
            {
              value: "2003",
              label: "省份"
            },
            {
              value: "2001",
              label: "VIP等级"
            }
          ]
        },
        {
          label: "用户标签",
          options: [
            {
              value: "4001",
              label: "用户进入活动时长"
            },
            {
              value: "4002",
              label: "流失用户"
            }
          ]
        }
      ],
      operation: [
        {
          label: "等于",
          value: 1
        },
        {
          label: "不等于",
          value: 2
        },
        {
          label: "小于",
          value: 3
        },
        {
          label: "大于",
          value: 4
        },
        {
          label: "区间",
          value: 5
        },
        {
          label: "有值",
          value: 6
        },
        {
          label: "无值",
          value: 7
        }
      ]
    };
  },
  methods: {
    parent_update() {
      this.$emit("update", null);
    }
  },
  mounted() {},
  computed: {
    value_list() {
      let arr = [];
      if (this.item.key == "2003") {
        arr = [
          {
            label: "广东",
            value: 66
          },
          {
            label: "安徽",
            value: 77
          }
        ];
      }
      if (this.item.key == "1006") {
        arr = [
          {
            label: "IOS",
            value: 666
          },
          {
            label: "Android",
            value: 777
          }
        ];
      }
       if (this.item.key == "4001") {
        arr = [
          {
            label: ">1000",
            value: 6666
          },
          {
            label: ">3000",
            value: 7777
          }
        ];
      }
      return arr;
    }
  }
};
</script>

<style scoped lang="scss">
* {
  box-sizing: border-box;
}
.screeningVerification {
  height: 100%;
  padding: 0 10px;
  display: flex;
  align-items: center;
  .left {
    width: 2.6rem;
    margin-right: 0.2rem;
  }
  .mid {
    width: 1.4rem;
    margin-right: 0.2rem;
  }
  .right {
    min-width: 6rem;
  }
  .txt {
    width: 0.5rem;
    margin-right: 0.2rem;
    text-align: center;
  }
}
// ::v-deep .show_hidden {
// }
</style>
